<template>
  <div class="index">
    <headers></headers>
    
    <!-- 轮播图部分 -->
    <div class="hero-section">
      <el-carousel height="600px" indicator-position="none" arrow="hover">
        <el-carousel-item v-for="(item,index) in rotations" :key="index">
          <div class="carousel-item" :style="{ backgroundImage: `url(${item.image})` }">
            <div class="carousel-content">
              <h1>探索世界的美好</h1>
              <p>发现令人惊叹的景点，开启难忘的旅程</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 游客数量统计 -->
    <div class="stats-section">
      <div class="stats-container">
        <i class="el-icon-user-solid"></i>
        <div class="stats-content">
          <div class="stats-number">{{count}}</div>
          <div class="stats-label">全年接待游客量</div>
        </div>
      </div>
    </div>

    <!-- 推荐景点部分 -->
    <div class="section">
      <div class="section-container">
        <div class="section-header">
          <h2>推荐景点</h2>
          <p>精选热门景点，带您领略自然与人文的完美融合</p>
        </div>
        <div class="cards-grid">
          <div class="card" v-for="(item,index) in attractions" :key="index">
            <div class="card-image" :style="{ backgroundImage: `url(${item.images.split(',')[0]})` }">
              <div class="card-overlay">
                <div class="card-actions">
                  <el-button type="danger" round @click="toInfo(item.id)">立即预约</el-button>
                  <el-button type="success" round @click="toComment(item.id, item.name)">查看评论</el-button>
                </div>
              </div>
            </div>
            <div class="card-content">
              <h3>{{item.name}}</h3>
              <p>{{item.introduce}}</p>
            </div>
          </div>
        </div>
        <div class="section-footer">
          <el-button type="primary" round @click="toAttraction">发现更多景点</el-button>
        </div>
      </div>
    </div>

    <!-- 旅游路线部分 -->
    <div class="section routes-section">
      <div class="section-container">
        <div class="section-header">
          <h2>精选路线</h2>
          <p>专业规划路线，让您的旅行更加轻松愉快</p>
        </div>
        <div class="cards-grid">
          <div class="card route-card" v-for="item in line" :key="item.id">
            <div class="card-image" :style="{ backgroundImage: `url(${item.images.split(',')[0]})` }">
              <div class="card-overlay">
                <el-button type="primary" round @click="toLineInfo(item.id)">查看详情</el-button>
              </div>
            </div>
            <div class="card-content">
              <h3>{{item.name}}</h3>
              <p>{{item.introduce}}</p>
            </div>
          </div>
        </div>
        <div class="section-footer">
          <el-button type="primary" round @click="toLine">浏览更多路线</el-button>
        </div>
      </div>
    </div>

    <bottoms></bottoms>
  </div>
</template>

<script>
  import {getSysRotationsList,getSysAttractionsIndex,getUserCount,getSysLineIndex} from '../../api/api'
  import headers from '@/components/header'
  import bottoms from '@/components/bottom'
  
  export default {
    name: 'Index',
    components: {
      headers,
      bottoms
    },
    data() {
      return {
        rotations: [],
        attractions: [],
        count: 0,
        line: [],
      }
    },
    methods: {
      toAttraction() {
        this.$router.push("/attractions")
      },
      toLine() {
        this.$router.push("/line")
      },
      toInfo(id) {
        this.$router.push("/attractionsInfo?id=" + id)
      },
      toLineInfo(id) {
        this.$router.push("/lineInfo?id=" + id)
      },
      toComment(id, name) {
        this.$router.push(`/attractionsComment?id=${id}&name=${name}`)
      },
      getSysRotationsList() {
        getSysRotationsList().then(res => {
          if (res.code == 1000) {
            this.rotations = res.data
          }
        })
      },
      getSysAttractionsIndex() {
        getSysAttractionsIndex().then(res => {
          if (res.code == 1000) {
            this.attractions = res.data
          }
        })
      },
      getUserCount() {
        getUserCount().then(res => {
          if (res.code == 1000) {
            this.count = res.data
          }
        })
      },
      getSysLineIndex() {
        getSysLineIndex().then(res => {
          if (res.code == 1000) {
            this.line = res.data
          }
        })
      }
    },
    mounted() {
      this.getSysRotationsList()
      this.getSysAttractionsIndex()
      this.getUserCount()
      this.getSysLineIndex()
    }
  }
</script>

<style scoped>
.index {
  min-height: 100vh;
  background-color: #f8f9fa;
}

/* Hero Section */
.hero-section {
  position: relative;
  height: 600px;
}

.carousel-item {
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}

.carousel-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
}

.carousel-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 2;
}

.carousel-content h1 {
  font-size: 3.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.carousel-content p {
  font-size: 1.5rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Stats Section */
.stats-section {
  background-color: #fff;
  padding: 2rem 0;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stats-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.stats-container i {
  font-size: 2.5rem;
  color: #409EFF;
}

.stats-content {
  text-align: center;
}

.stats-number {
  font-size: 2rem;
  font-weight: bold;
  color: #303133;
}

.stats-label {
  color: #606266;
  margin-top: 0.5rem;
}

/* Section Styles */
.section {
  padding: 4rem 0;
}

.routes-section {
  background-color: #fff;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h2 {
  font-size: 2.5rem;
  color: #303133;
  margin-bottom: 1rem;
}

.section-header p {
  color: #606266;
  font-size: 1.1rem;
}

/* Cards Grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card-image {
  height: 250px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover .card-overlay {
  opacity: 1;
}

.card-actions {
  display: flex;
  gap: 1rem;
}

.card-content {
  padding: 1.5rem;
}

.card-content h3 {
  font-size: 1.25rem;
  color: #303133;
  margin-bottom: 0.5rem;
}

.card-content p {
  color: #606266;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.section-footer {
  text-align: center;
  margin-top: 2rem;
}

/* Route Card Specific */
.route-card .card-overlay {
  background: rgba(0,0,0,0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .carousel-content h1 {
    font-size: 2.5rem;
  }
  
  .carousel-content p {
    font-size: 1.2rem;
  }
  
  .section-header h2 {
    font-size: 2rem;
  }
  
  .cards-grid {
    grid-template-columns: 1fr;
  }
}
</style>